import { computed, reactive, ref } from 'vue';
/**
 * 一个定制的VueCompositionApi插件，用于管理目标索引。
 * @param {number} initIndex - 初始化目标索引的值。
 * @returns {Object} 返回一个对象，包含目标索引和设置目标索引的方法。
 */
export function usetargetId (initIndex) {
  // 使用ref来创建一个响应式的目标索引
  const targetId = ref(initIndex);
  function settargetId (id) {
    targetId.value = id;
    console.log('修改了数据', targetId.value);
  }

  // 返回目标索引和设置索引的方法
  return {
    targetId,
    settargetId
  }
}

/**
 * 提供一个管理左右两侧选中数据的钩子
 *
 * @return  {Object}  [return description]
 */
export function useCheckedData () {
  /* 左右两侧的选中数据 */
  const checkedData = reactive({
    left: [],
    right: []
  })

  /**
   * 向指定侧添加选中数据。
   * @param {String} leftOrRight - 指定添加数据的侧，'left' 或 'right'。
   * @param {Object} item - 要添加的数据项。
   */
  function addCheckedData (leftOrRight, item) {
    checkedData[leftOrRight].push(item);
  }
  /**
  * 从指定侧移除选中数据。
  * @param {String} leftOrRight - 指定移除数据的侧，'left' 或 'right'。
  * @param {Number} id - 要移除的数据项的ID。
  */
  function removeCheckedData (leftOrRight, id) {
    checkedData[leftOrRight] = checkedData[leftOrRight].filter(item => item.id !== id);
  }
  return {
    checkedData,
    addCheckedData,
    removeCheckedData
  }
}

export function useRightListData (initData, checkedData) {
  const rightListData = ref(initData);
  /* 合并数据 */
  function addRighetListData (dataList) {
    rightListData.value = [...rightListData.value, ...dataList];

    dataList = [];
    console.log('dataList', dataList);
    checkedData.left = [];
  }

  /* 移除数据 */
  function removeRightListData (dataList) {
    dataList = dataList.map(item => item.id);
    rightListData.value = rightListData.value.filter(({ id }) => !dataList.includes(id));
    checkedData.right = [];
  }
  return {
    rightListData,
    addRighetListData,
    removeRightListData
  }
}
/**
 * 一些计算属性
 *
 * @param   {[type]}  data           源数据
 * @param   {ref}  id             选中的下拉选ID
 * @param   {ref}  rightListData  右侧的数据
 * @param   {[type]}  checkedData    左侧和右侧选中的数据
 *
 * @return  {[type]}                 [return description]
 */
export function useComponentData (data, id, rightListData, checkedData) {
  /* 左侧标题 */
  const leftTitle = computed(() => {
    const _data = data.find(item => id.value == item.id);
    if (!_data) {
      return '请选择';
    }
    return _data.title;
  })

  /* 左侧数据 */
  const leftListData = computed(() => {
    const { data: currentData } = data.find(item => id.value == item.id);
    return currentData.filter(item => {
      if (!rightListData.value.find(({ id }) => item.id == id)) {
        return item;
      }
    })
  })

  /* 是否可点击左侧按钮 */
  const isDisablLeftBtn = computed(() => {
    return checkedData.right.length == 0;
  })
  /* 是否可点击右侧侧按钮 */
  const isDisablRightBtn = computed(() => {
    return checkedData.left.length == 0;
  })
  return {
    leftTitle,
    leftListData,
    isDisablLeftBtn,
    isDisablRightBtn
  }
}